<template>
	<view class="content">
		<view>
			<view class="title-block">
				<view class="line"></view>
				<view class="title">所在县市</view>
			</view>
			<view class="info-block">
				<view class="info-list" v-for="(item,index) in list" :key="item.id" @click="bindActive(item)"
					:class="tabActive==item.id?'active':''">
					<view class="name">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view v-if="currentChild.length>0">
			<view class="title-block">
				<view class="line"></view>
				<view class="title">所在街道/乡镇</view>
			</view>
			<view class="info-block">
				<view class="info-list" v-for="(item,index) in currentChild" :key="item.id" @click="changeActive(item)"
					:class="secActive==item.id?'active':''">
					<view class="name">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view v-if="subLevelModelList.length>0">
			<view class="title-block">
				<view class="line"></view>
				<view class="title">所在村</view>
			</view>
			<view class="info-block">
				<view class="info-list" v-for="(item,index) in subLevelModelList" :key="item.id"
					@click="changeSubActive(item)" :class="subActive==item.id?'active':''">
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSelectCityApi,
		getSelectTownApi,
		getSelectVillageApi
	} from '@/api/select.js'
	import {
		setStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				tabActive: 1,
				secActive: 0,
				subActive: 0,
				list: [],
				currentChild: [],
				subLevelModelList: []
			}
		},
		methods: {
			bindActive(e) {
				this.tabActive = e.id
				this.subLevelModelList = []
				this.getSelectTown()
				this.secActive = 0
			},
			changeActive(e) {
				this.secActive = e.id
				this.getSelectVillage()
				this.subActive = 0
			},
			changeSubActive(e) {
				this.subActive = e.id
				setStorage('villageId', e.id);
				setStorage('villageName', e.name);
				uni.reLaunch({
					url: `/pages/index/index?id=${e.id}&name=${e.name}`
				});
			},
			switchTo(url) {
				uni.reLaunch({
					url
				});
			},
			getSelectCity() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getSelectCityApi({}).then(res => {
					uni.hideLoading()
					this.list = res
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getSelectTown() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getSelectTownApi({
					id: this.tabActive
				}).then(res => {
					uni.hideLoading()
					this.currentChild = res
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getSelectVillage() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getSelectVillageApi({
					id: this.secActive
				}).then(res => {
					uni.hideLoading()
					this.subLevelModelList = res
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onShow() {
			this.getSelectCity()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.content {
		width: 100%;
		padding: 30rpx;

		.title-block {
			display: flex;
			align-items: center;

			.line {
				background-color: #0256FF;
				width: 14rpx;
				height: 30rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
			}

			.title {
				color: #0256FF;
				font-size: 32rpx;
			}
		}

		.info-block {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 30rpx;

			.info-list {
				width: calc((100% - 40rpx) / 3);
				margin-right: 20rpx;
				background-color: #EDECEC;
				margin-bottom: 30rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				font-size: 28rpx;
			}

			.info-list.active {
				background-color: #CCDDFF;
				color: #0256FF;
			}

			.info-list:nth-child(3n) {
				margin-right: 0;
			}
		}

	}
</style>